<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        /* .list-group-item{
            width: 300px;
            height: 20rem;
        }
         */
        table{
            border: 0.0625rem;
        }
        .box{
            width: 25.75rem;
            height: 23.75rem;

        }

        .zhuanjia{
            margin-top: 0.25rem;
            width: 55%;
            height: 100%;
            float:left;
        }
        .zhuanjia1{
            margin-top: 0.25rem;
            width:100%;
            height: 100%;
            float:left;
        }
        .btn-primary{
            margin-top: 5.625rem;
            margin-left: 1.25rem;

        }
        .list li span{
            font-weight:bold;}

        .list li{

            line-height:24px;
            font-size:14px;
            list-style:none;
        }


        .addImages {
            display:inline-block;
            -webkit-box-sizing:border-box;
            -moz-box-sizing:border-box;
            box-sizing:border-box ;
            position: relative;

            width:18.25rem;
            height:25.5rem;
            overflow:hidden;

        }
        .file {
            position:absolute;
            top:0;
            left:0;
            width:18.25rem;
            height:26.5rem;
            opacity:0;
        }


        ul,p{margin:0;padding:0;}
    </style>
</head>
<body>


<center><h2>在线预约</h2><center>
    <hr />
    <form action="/1/upload" method="POST" class="zhuanjia1" enctype="multipart/form-data" id="form-data" hidden>
        <input type="file" name="file" class="file" id="file" accept="image/png, image/jpeg, image/gif, image/jpg">
    </form>
    <table class="table table-bordered">
        <tbody>
        <!-- 1 -->
        <tr th:each="threedoctor,itemStat: ${doctors}" class="box">
            <td th:each="doctor: ${doctors[itemStat.index]}" class="box">
                <div class="weui-cells weui-cells_form">
                    <div class="addImages" style="float:left;">
                        <img th:src="@{'/img/'+ ${doctor.id}}" th:attr="data-id=${doctor.id}" class="doctor-avatar zhuanjia1"/>
                    </div>
                </div>
                <ul class="list">
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <li><span>姓名:</span><span th:text="${doctor.name}">吴海英</span></li>
                    <li><span>性别:</span><span th:text="${doctor.sex}">男</span></li>
                    <li><span>专业方向：</span><span th:text="${doctor.direction}">斜视与小儿眼病</span></li>
                    <a class="btn btn-primary" th:href="'/introduction?id='+${doctor.id}">简介</a>
                    <a class="btn btn-primary" href="/appointment">挂号</a>
                </ul>
            </td>
        </tr>

        </tbody>
    </table>

</body>


</html>
